<template>
	<view>
		<nav-bar title="查看物流" bgColor="#f5f5f5"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="logistics_info">
			<text>承运物流：{{logisticsInfo.expName}}</text>
			<view><text>物流单号：{{logisticsInfo.number}}</text><button @click="onCopy(logisticsInfo.number)">复制</button></view>
		</view>
		<view class="logistics_status">
			<view  v-for="(item, index) in logisticsInfo.list" :key="index">
				<view>{{item.status}}</view>
				<text>{{item.time}}</text>
			</view>
		</view>
		<recommend-goods ref="recommend"></recommend-goods>
	</view>
</template>

<script>
	import recommendGoods from '@/components/module/recommend_goods';
export default {
	components: {
		recommendGoods
	},
	data() {
		return {
			orderNo: '',
			logisticsInfo: {}
		};
	},
	//第一次加载
	onLoad(e) {
		if (e.orderNo) {
			this.orderNo = e.orderNo;
		}
		this.pageData();
	},
	//页面显示
	onShow() {},
	//方法
	methods: {
		onCopy(data) {
			if (data) {
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.showToast({
							title: "复制成功"
						});
					}
				});
			}
		},
		pageData() {
			this.$http
				.get('api/order/v1/logistics_info', {
					orderNo: this.orderNo
				}, {
					isPrompt: false
				})
				.then(res => {
					this.logisticsInfo = res;
				}, err => {
					uni.showModal({
						title: "提示",
						content: err.info,
						showCancel: false,
						success: () => {
							uni.navigateBack();
						}
					})
				});
		}
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {
		this.$refs.recommend.loadMore();
	},
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';
.logistics_info{
	margin: 30rpx;
	padding: 30rpx;
	border-radius: 8rpx;
	background-color: $viceColor;
	display: flex;
	flex-direction: column;
	>text{
		font-size: 28rpx;
		color: $themeColor;
		padding-bottom: 10rpx;
	}
	>view{
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: $themeColor;
		>text{
			font-size: 28rpx;
		}
		>button{
			width: 80rpx;
			height: 40rpx;
			@include theme('gradient_bg');
			line-height: 40rpx;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}
}
.logistics_status{
	padding: 30rpx;
	margin: 30rpx;
	background: #FFFFFF;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	position: relative;
	// border-left: 1rpx solid #e5e5e5;
	&:after{
		content: "";
		position: absolute;
		width: 1rpx;
		top: 50rpx;
		bottom: 30rpx;
		background: #e5e5e5;
	}
	>view{
		padding-left: 40rpx;
		padding-bottom: 55rpx;
		
		>view{
			font-size:28rpx;
			color: #333333;
			&:before{
				content: "";
				position: absolute;
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background: #e5e5e5;
				left: 22rpx;
				margin-top: 10rpx;
			}
		}
		>text{
			font-size: 24rpx;
			color: #999999;
		}
	}
}
</style>
